<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Router多级路由</title>
    <script src="vue.js"></script>
    <!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->
    <script src="vue-router.js"></script>

</head>

<body>
    <div id="app">
        <router-link to="/h5">H5学院</router-link>
        <router-link to="/java">Java学院</router-link>
        <router-link to="/python">Python学院</router-link>

        <!-- router exit -->
        <div>
            <!-- 路由器匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>

    <!-- template -->
    <template id="h5">
        <div>
            <h2>HTML5学院</h2>
            <p>学习未来神技</p>
            <img src="https://7n.w3cschool.cn/attachments/cover/cover_html5.png?imageView2/1/w/150/h/84" alt="html5">           
            <div>
                <router-link to='/h5/basic'>基础班</router-link>
                <router-link to='/h5/advance'>高级班</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </template>
    <template id="basic">
        <div>
            <h3>基础班</h2>
            <p>学习未来神技</p>
            <img src="../../images/14.jpg">
        </div>
    </template>
    <template id="advance">
        <div>
            <h2>高级班</h2>
            <p>学习未来神技</p>
            <img src="../../images/16.jpg">
        </div>
    </template>



    <template id="java">
        <div>
            <h2>JAVA学院</h2>
            <p>世界上最好的语言！</p>
            <img src="https://7n.w3cschool.cn/attachments/cover/cover_java.png?imageView2/1/w/150/h/84" alt="java">
        </div>
    </template>
    <template id="python">
        <div>
            <h2>PYTHON学院</h2>
            <p>现在抄的很火的</p>
            <img src="https://7n.w3cschool.cn/attachments/cover/cover_python.png?t=1541847202?imageView2/1/w/150/h/84" alt="pythin">
          
        </div>
    </template>

    <!-- js -->
    <script>
        // 1. create component
        const H5 = Vue.extend({
            template: "#h5"
        });
        const Basic = Vue.extend({
            template: "#basic"
        });
        const Advance = Vue.extend({
            template: "#advance"
        });
        const Java = Vue.extend({
            template: "#java"
        });
        const Python = Vue.extend({
            template: "#python"
        });

        // 2. defined routes
        const routes = [{
            path: '/h5',
            component: H5,
            children: [{
                path: 'basic',
                component: Basic
            }, {
                path: 'advance',
                component: Advance
            }, {
                path: '/',
                redirect: 'basic'
            }]
        }, {
            path: '/python',
            component: Python
        }, {
            path: '/java',
            component: Java
        }, {
            // root router config
            path: '/',
            redirect: '/h5'
        }];

        // 3. create router instance
        const router = new VueRouter({
            routes
        });

        // 4. create Vue instance and mount
        new Vue({
            router
        }).$mount("#app");
    </script>
</body>

</html>